<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>KISSY gallery - checkcode</title>
<link rel="shortcut icon" href="../../../../kissy-dpl/base/assets/favicon.ico"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/reset.css"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/kissy-docs.css"/>
<script src="http://docs.kissyui.com/kissy/build/kissy.js"></script>
<script src="../../../../kissy-dpl/base/assets/kissy-docs.js"></script>
<link type="text/css" href="assets/checkcode.css" rel="stylesheet"  />
<link type="text/css" href="assets/message.css" rel="stylesheet"  />
<script type="text/javascript" src="assets/Message2.js"></script>
<script>
    KISSY.config({
        packages:[
            {
                name:"gallery",
                tag:"20120625",
                path:"../../../",  // cdn上适当修改对应路径
                charset:"utf-8"
            }
        ]
    });
</script>
</head>
<body>
<div id="header">
    <h1 class="logo"><a alt="KISSY" href="http://kissyui.com/"><img src="../../../../kissy-dpl/base/assets/logo.png"/></a></h1>
    <div class="sub-title">Gallery</div>
    <ul class="navigation">
        <li><a href="http://blog.kissyui.com/">博客</a></li>
        <li><a href="http://github.com/kissyteam">源码</a></li>
    </ul>

</div>
<div id="content">
    <div class="s-crumbs">
        <span>当前位置：</span>
        <a href="http://kissyui.com/">KISSY</a>
        <a href="../../../index.html">Gallery</a>
        <span>checkcode</span>
    </div>
			<pre class="s-section">				
作者：wondger@gmail.com(棪木)
功能：提供图片验证码、语音验证码统一体验。
描述：使用阿里云验证码接口，组件提供异步校验方法接口，需单独调用，组件本身不触发异步校验。
源码：<a href="index.js">checkcode.js</a></pre>

    <h3 class="s-title">Demo - 验证码</h3>
    <div class="s-section">
        <div class="s-demo">
            <div>DOM内容</div>
            <div class="kv-item">
                <span class="kv-label">验证码：</span>
                <input class="i-text" title="验证码" type="text" value="" id="J_CheckCode" />
                <div class="checkcode-ctrl" id="J_CheckCodeContainer"></div>
                <div class="msg-inline msg-weak hide" id="J_CheckCodeTip">
                    <i></i>
                    <div class="msg-cnt"></div>
                </div>
            </div>
            
            <script>
                var apiserver = window.location.search.indexOf('dev')>0 ? 'http://10.250.5.9:8080' : 'http://pin.aliyun.com'
                KISSY.use('gallery/checkcode/1.0/,Message2',function(S,CheckCode,Message2){
                    var tip = Message2('#J_CheckCodeTip'),

                        checkcode = CheckCode({
                            container:'#J_CheckCodeContainer',
                            input:'#J_CheckCode',
                            prefixCls:'sex-',
                            apiserver:apiserver,
                            identity:'member1.taobao.com',
                            sessionid:'abcde12345'
                        }).init();

                    if(checkcode){
                        checkcode.showImg();

                        checkcode.on('switch',function(){
                            tip.hide();
                        }).on('refresh',function(){
                            tip.hide();
                        });

                        // blur时校验
                        S.one('#J_CheckCode').on('blur',function(){
                            var val = S.trim(this.value);
                            if(!val.length){
                                tip.error('不能为空');
                                return;
                            }else if(val.length<4){
                                tip.error('验证码格式错误');
                                return;
                            }

                            checkcode.check(function(data){
                                if(data.success){
                                    tip.ok();
                                }else{
                                    tip.error('验证码错误');
                                }
                            });
                        })
                    }

                });
                
            </script>
        </div>
        <a class="s-view-code" href="demo.html#">显示源码</a><!--点击该链接自动帮你显示s=demo里的内容，如不需要，去除链接即可-->
    </div>

    <h3 class="s-title">API</h3>
    <div class="s-section">
        <h4 class="s-api-title">构造器</h4>
        <div class="s-api-method">
            new checkcode(cfg) / checkcode(cfg)
        </div>
        <h4 class="s-api-title">参数</h4>
        <div class="s-api-params">
            <ul class="s-list">
                <li>{Object} [cfg] 配置参数</li>
            </ul>
        </div>
        <div class="s-api-params">
            cfg: {
            <ul class="s-list">
                <li>{HTMLElement|Selector} [ <em>container</em> = '#J_Code' ] 验证码容器</li>
                <li>{HTMLElement|Selector} [ <em>input</em> = "#J_CheckCode" ] 验证码输入框</li>
                <li>{String} [ <em>prefixCls</em> = "reg-" ] CSS Class前缀</li>
                <li>{String} [ <em>identity</em> = "member1.taobao.com" ] 验证码接入应用id，需要阿里云添加后才能正常请求接口</li>
                <li>{String} [ <em>sessionid</em> = "abcdefg123" ] sessionid</li>
                <li>{String} [ <em>apiserver</em> = "http://pin.aliyun.com" ] 接口服务器，默认"http://pin.aliyun.com"</li>
            </ul>
            }
        </div>
        
        <h4 class="s-api-title">返回</h4>
        <div class="s-api-return">null</div>
        <h4 class="s-api-title">方法</h4>
        <div class="s-api-method">
            check(callback)
        </div>
        <h4 class="s-api-title">参数</h4>
        <div class="s-api-params">
            <ul class="s-list">
                <li>{Function} [ <em>callback</em> = function(data){} ] 异步校验回调，默认传入data参数{"success":Boolean,"codeType":"IMG/AUDIO"}</li>
            </ul>
        </div>
        <h4 class="s-api-title">返回</h4>
        <div class="s-api-return">CheckCode实例对象</div>
        <h4 class="s-api-title">事件</h4>
        <div class="s-api-method">
            switch 图片/语音验证码切换时触发
        </div>
        <h4 class="s-api-title">事件</h4>
        <div class="s-api-method">
            refresh 验证码刷新时触发
        </div>
    </div>

    <h3 class="s-title">Note</h3>
    <div class="s-section">
        <ul class="s-list">
        </ul>
    </div>
</div>
<div id="footer">
    &copy; Copyright 2010~2011, KISSY Team.
</div>
</body>
</html>
